<template>
	<div class="regster">
		<van-nav-bar
        title="找回密码"
        left-text=""
        left-arrow
        @click-left="onClickLeft"   />
<div class="regster-box">
  <input type="tel" placeholder="请输入手机号码" v-model="input1"/>
  <p @click="code" v-show="sendAuthCode">{{msg}}</p>
 <p v-show="!sendAuthCode">{{auth_time}}秒后重试</p>
</div>
<div class="regster-sta">
	<input type="text" placeholder="请输入短信中的验证码" />
</div>
<div class="regster-sta1">
	<input type="password" placeholder="请输入密码(最少6位)" />
</div>
<div class="regster-btn" @click="myfun">
	<p>提交</p>
</div>
<div class="regster-text">
	注册/登录即代表同意《贝壳隐私政策》《贝壳用户服务协议》
</div>

	</div>
</template>

<script>
import { Toast } from 'vant';
import { NavBar } from 'vant';
export default {
	name: 'chagepwd',

	data() {
		return {
			input1: '',
			tel: null,
			msg: '发送验证码',
			sendAuthCode: true,
			auth_time: 0
		};
	},
	methods: {
		onClickLeft() {
			this.$router.go(-1);
		},
		code() {
			this.tel = this.input1;
			if (this.tel == '') {
				this.$toast({
					message: '请输入的手机号不能为空'
				});
			} else {
				if (!/^((1[3,5,8,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.tel)) {
					this.$toast({
						message: '请输入有效的手机号'
					});
				} else {
					this.sendAuthCode = false;
					this.auth_time = 60;
					var auth_timetimer = setInterval(() => {
						this.auth_time--;
						if (this.auth_time <= 0) {
							this.sendAuthCode = true;
							clearInterval(auth_timetimer);
						}
					}, 1000);
				}
			}
		},
		myfun(){
	      
		}
	}
};
</script>

<style scoped="scoped">
/* .regster{
		width: 700rem;
		height: 90rem;
		margin: auto;
	} */

.regster-box {
	width: 6.5rem;
	height: 1.2rem;
	margin: auto;
	border-bottom: 1px solid gainsboro;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.regster-box > input {
	width: 4rem;
	height: 0.9rem;
	border: none;
}
.regster-box > p {
	font-size: 0.27rem;
}
.regster-sta {
	width: 6.5rem;
	height: 1.2rem;
	margin: auto;
	border-bottom: 1px solid gainsboro;
	display: flex;
	align-items: center;
}
.regster-sta > input {
	width: 5rem;
	height: 0.9rem;
	border: none;
}
.regster-sta1 {
	width: 6.5rem;
	height: 1.2rem;
	margin: auto;
	border-bottom: 1px solid gainsboro;
	display: flex;
	align-items: center;
}
.regster-sta1 > input {
	width: 5rem;
	height: 0.9rem;
	border: none;
}
.regster-btn {
	width: 6.5rem;
	height: 0.95rem;
	margin: auto;
	background: #008aff;
	margin-top: 0.3rem;
	text-align: center;
	line-height: 0.95rem;
	color: white;
	font-size: 0.3rem;
}
.regster-text {
	width: 6.5rem;
	height: 0.5rem;
	margin: auto;
	color: gainsboro;
	font-size: 0.25rem;
	margin-top: 0.3rem;
}
</style>
